<template>
    <div>
        <el-button @click="nestedTables">嵌套表格</el-button>
        <el-button @click="nestedForm">嵌套表单</el-button>
    </div>
</template>

<script>
import gridOptionsFn from "./gridOptionsFn.js"
import formConfigFn from "./formConfigFn.js"
export default {
    data () {
        return {
            gridOptions: gridOptionsFn.call(this),
        }
    },
    methods: {
        nestedTables () {
            this.$drawer({
                options: {
                    // ['with-header']: false,
                    size: '100%',
                    title: '嵌套表格',
                    direction: "ltr",
                    ['destroy-on-close']: true,
                    dialogVisible: true,
                },
                render: () => {
                    return <ChfGrid  {...{ attrs: this.gridOptions }} />
                }
            })
        },
        nestedForm () {
            this.$drawer({
                options: {
                    dialogVisible: true,
                    size: 1000,
                    title: '嵌套表单',
                    direction: "ltr",
                    ['destroy-on-close']: true
                },
                render: (options) => {
                    console.log(options);
                    return <ChfForm  {...{ attrs: this.$observable(formConfigFn.call(this, options)) }} ref="form" />
                }
            })
        }
    }
}
</script>

<style>
</style>